
<template>
  <div class="network-root">
    <div>
      <a-input v-model="filterInput" placeholder="filter"></a-input>
    </div>
    <div class="network-main">
      <div class="network-table-wrap" :style="tableWrapStyle">
        <a-table class="network-table" column-resizable :bordered="{ cell: true }" :columns="columns" :stripe="true"
          :data="networkFiltered" @column-resize="handleResize" @cell-click="handleCellClick" :scrollbar="false">
          <template #requestPathName="{ record }">
            {{ record.basicInfo.requestPathName }}
          </template>
          <template #requestMethod="{ record }">
            <span>{{ record.basicInfo.requestMethod }}</span>
          </template>
          <template #status="{ record }">
            <span>{{ record.basicInfo.status }} {{ record.basicInfo.statusText }}</span>
          </template>
          <template #type="{ record }">
            <span>{{ record.basicInfo.type }}</span>
          </template>
          <template #timestamp="{ record }">
            <span>{{ timestamp2dateTime(record.basicInfo.timestamp) }}</span>
          </template>
        </a-table>
      </div>
      <NetworkDetail v-model:visible="detailVisible" :data="detailData">
      </NetworkDetail>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useNetworkStore } from '@/store/network'
import { timestamp2dateTime } from '@/utils/date-utils';
import NetworkDetail from './network-detail.vue';
import moment from 'moment';
const networkStore = useNetworkStore();
const columnWidth = ref(500); // 初始列宽度
const detailVisible = ref(false)
const detailData = ref(null)

const props = defineProps({
  startTime: {
    required: false,
  },
  endTime: {
    required: false,
  },
});

const columns = [
  {
    title: 'Name',
    slotName: 'requestPathName',
    width: columnWidth,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: 'Method',
    width: 100,
    slotName: 'requestMethod',
  },
  {
    title: 'Status',
    width: 100,
    slotName: 'status',
  },
  {
    title: 'Type',
    width: 110,
    slotName: 'type',
  },
  {
    title: 'Time',
    slotName: 'timestamp',
  },
];

//#region 数据过滤
const filterInput = ref('');

const networkFiltered = computed(() => {
  console.log('networkFiltered', props.startTime, props.endTime);
  const startTimestamp = moment(props.startTime || '1997-01-01 00:00:00').valueOf() / 1000;
  const endTimestamp = moment(props.endTime || '2080-01-01 00:00:00').valueOf() / 1000;
  console.log('networkFiltered startTimestamp', startTimestamp);
  console.log('networkFiltered endTimestamp', endTimestamp);
  return networkStore.shownNetworks.filter((network) => {
    const isUrlMatch = network.basicInfo.requestUrl?.includes(filterInput.value);
    return isUrlMatch
      && network.basicInfo.timestamp >= startTimestamp
      && network.basicInfo.timestamp <= endTimestamp;
  });
});

//#endregion

// const paginationParams = computed(() => {
//   total: networkFiltered.value.length,
//     showPageSize: true
// })


const tableWrapStyle = computed(() => {
  if (detailVisible.value)
    return {
      width: `${columnWidth.value + 1}px`,
      display: 'block',
    }
  const maxWidth = window.innerWidth - 201;
  console.log('tableWrapStyle maxWidth', maxWidth);
  return {
    maxWidth: `${maxWidth + 1}px`,
    minWidth: '1000px',
    display: 'flex',
  };
});

function handleResize(dataIndex, width) {
  if (dataIndex !== '__arco_data_index_0') return;
  columnWidth.value = width;
  console.log('handleResize columnWidth', columnWidth.value);
}
function handleCellClick(record, column) {
  if (column.dataIndex !== '__arco_data_index_0') return
  detailVisible.value = true
  detailData.value = record
}
</script>
<style scoped lang="less">
@import url('./network.less');
</style>
